<template>
  <Form
    ref="employeeForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    inline
    style="width: 100%">
    <FormItem prop="name" style="width: 15%">
      <Input type="text" v-model="form.name" placeholder="请输入姓名" />
    </FormItem>
    <FormItem prop="tel" style="width: 15%">
      <Input type="text" v-model="form.tel" placeholder="请输入手机号" />
    </FormItem>
    <FormItem prop="num" style="width: 15%">
      <Input type="text" v-model="form.num" placeholder="请输入工号" />
    </FormItem>
    <FormItem prop="intime">
      <DatePicker type="date" placeholder="请选择入职日期" v-model="form.intime"></DatePicker>
    </FormItem>
    <FormItem prop="leavetime">
      <DatePicker type="date" placeholder="请选择离职日期" v-model="form.leavetime"></DatePicker>
    </FormItem>
    <FormItem prop="state" style="width: 15%">
      <Select v-model="form.state" placeholder="请选择状态" clearable>
        <Option value=0>
          在职
        </Option>
        <Option value=1>
          离职
        </Option>
      </Select>
    </FormItem>
    <FormItem style="float: right">
      <Button @click="handleSubmit" icon="md-search" type="primary">
        搜索
      </Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  name: 'EmployeeForm',
  props: {
    nameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    telRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    numRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    intimeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    leavetimeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    stateRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      form: {
        name: '',
        tel: '',
        num: '',
        intime: '',
        leavetime: '',
        state: ''
      }
    }
  },
  computed: {
    rules () {
      return {
        name: this.nameRules,
        tel: this.telRules,
        num: this.numRules,
        intime: this.intimeRules,
        leavetime: this.leavetimeRules,
        state: this.stateRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.employeeForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            name: this.form.name,
            tel: this.form.tel,
            num: this.form.num,
            intime: this.form.intime ? this.$moment(this.form.intime).format('YYYY-MM-DD HH:mm:ss') : '',
            leavetime: this.form.leavetime ? this.$moment(this.form.leavetime).format('YYYY-MM-DD HH:mm:ss') : '',
            state: this.form.state
          })
        }
      })
    }
  }
}
</script>
